<template lang="pug">
    div(class="main-all")
        div(class="simulation-screen")
            slot
        span(class="simulation-back",@click="butonClick('back')")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop")  保存并退出
        span(class="simulation-up",v-touch:start="startUp",v-touch:end="endUp",v-touch:moved="upMoved")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 增加或上移
        span(class="simulation-down",v-touch:start="startDown",v-touch:end="endDown",v-touch:moved="downMoved")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 减少或下移
        span(class="simulation-yes",@click="butonClick('yes')")
            span(class="back-line no-pop")
                span(class="back-line-text no-pop") 确定或进入
</template>

<script>
import moment from "moment";

export default {
  name: "skin",
  data() {
    return {
      startAt: null, // 按钮按下时间
      downInterval: null,
      upInterval: null
    };
  },
  methods: {
    /**计算模拟器屏幕高度 */
    calSimulationScreenHeight() {
      var d = document.querySelector(".simulation-screen");
      var width = d.clientWidth;
      // 数字比例根据图片像素比转换
      d.style.height = (width * 172) / 302 + "px";
    },
    /**计算模拟器四个按钮所在的位置 */
    calSimulationButtonsHeight() {
      var classes = [
        ".simulation-back",
        ".simulation-up",
        ".simulation-down",
        ".simulation-yes"
      ];

      classes.forEach(c => {
        var d = document.querySelector(c);
        var width = d.clientWidth;
        d.style.height = width + "px";
        d.style.borderRadius = width + "px";
      });
    },

    butonClick(eventName) {
      this.$emit(eventName);
    },
    startDown() {
      this.startAt = moment();
      if (this.downInterval == null) {
        this.downInterval = setInterval(
          function() {
            this.$emit("duringDown"); // 每0.5秒触发一次during事件，如果是click事件，那么在没执行之前，就会在endDown中被clear掉
            this.$emit("downlongtap");
          }.bind(this),
          500
        );
      }
    },
    endDown() {
      clearInterval(this.downInterval);
      this.downInterval = null;
      var milliseconds = moment().diff(this.startAt, "milliseconds");
      if (milliseconds < 300) {
        this.$emit("down");
      }
    },
    downMoved() {
      // 清除轮询，因为手机上长按移出不会触发click
      clearInterval(this.downInterval);
      this.$emit("down-moved");
    },
    startUp() {
      this.startAt = moment();
      const vm = this;
      this.upInterval = setInterval(function() {
        vm.$emit("duringUp"); // 每0.5秒触发一次during事件，如果是click事件，那么在没执行之前，就会在endDown中被clear掉
        vm.$emit("uplongtap");
      }, 500);
    },
    endUp() {
      clearInterval(this.upInterval);
      this.$emit("up-end");
      const milliseconds = moment().diff(this.startAt, "milliseconds");
      if (milliseconds < 300) {
        this.$emit("up");
      }
    },
    upMoved() {
      clearInterval(this.upInterval);
      this.$emit("up-moved");
    }
  },
  mounted() {
    this.calSimulationButtonsHeight();
    this.calSimulationScreenHeight();

    const keyboard = document.querySelector(".main-all"); //键盘

    keyboard.addEventListener("contextmenu", function(e) {
      e.preventDefault();
    });

    const spans = document.getElementsByClassName("no-pop");

    for (var index = 0; index < spans.length; index++) {
      doSet(index, spans);
    }

    function doSet(index, spans) {
      const span = spans[index];
      span.addEventListener("mousedown", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("mouseup", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("touchend", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("touchmove", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("touchstart", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
      span.addEventListener("click", e => {
        e.stopPropagation();
        e.preventDefault();
        return false;
      });
    }
  }
};
</script>

<style lang="less">
@height: 20%;
@width: @height * 527 / 1000;

.simulation-screen {
  position: absolute;
  width: 39%;
  left: 26%;
  top: 21%;
}

.simulation-back,
.simulation-up,
.simulation-down,
.simulation-yes {
  width: @width;
  height: @height;
  display: inline-block;
  position: absolute;
}

.simulation-yes {
  left: 82.4%;
  top: 36.4%;

  .back-line {
    border-top: 1px solid @back-line-color;
    width: 10vh;
    position: absolute;
    display: inline-block;
    left: 100%;
    top: 50%;
  }

  .back-line-text {
    position: absolute;
    right: -80px;
    top: -13px;
  }
}

@back-line-color: #ff6600;

.simulation-back {
  left: 68.8%;
  top: 36.4%;

  @back-left-height: 200%;

  .back-line {
    border-top: 1px solid @back-line-color;
    border-left: 1px solid @back-line-color;
    width: 23vh;
    height: @back-left-height;
    position: absolute;
    display: inline-block;
    left: 50%;
    top: -@back-left-height;
  }

  .back-line-text {
    position: absolute;
    right: -80px;
    top: -12px;
  }
}

.simulation-up {
  left: 75.8%;
  top: 16.7%;

  @up-height: 10vw;

  .back-line {
    border-top: 1px solid @back-line-color;
    width: 15vh;
    position: absolute;
    display: inline-block;
    left: 100%;
    top: 50%;
  }

  .back-line-text {
    position: absolute;
    right: -80px;
    top: -12px;
  }
}

.simulation-down {
  left: 75.5%;
  top: 56%;

  .back-line {
    border-top: 1px solid @back-line-color;
    width: 15vh;
    position: absolute;
    display: inline-block;
    left: 100%;
    top: 50%;
  }

  .back-line-text {
    position: absolute;
    right: -80px;
    top: -12px;
  }
}
</style>
